<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8"/>
  <title>iconfont Demo</title>
  <link rel="shortcut icon" href="//img.alicdn.com/imgextra/i4/O1CN01Z5paLz1O0zuCC7osS_!!6000000001644-55-tps-83-82.svg" type="image/x-icon"/>
  <link rel="icon" type="image/svg+xml" href="//img.alicdn.com/imgextra/i4/O1CN01Z5paLz1O0zuCC7osS_!!6000000001644-55-tps-83-82.svg"/>
  <link rel="stylesheet" href="https://g.alicdn.com/thx/cube/1.3.2/cube.min.css">
  <link rel="stylesheet" href="demo.css">
  <link rel="stylesheet" href="iconfont.css">
  <script src="iconfont.js"></script>
  <!-- jQuery -->
  <script src="https://a1.alicdn.com/oss/uploads/2018/12/26/7bfddb60-08e8-11e9-9b04-53e73bb6408b.js"></script>
  <!-- 代码高亮 -->
  <script src="https://a1.alicdn.com/oss/uploads/2018/12/26/a3f714d0-08e6-11e9-8a15-ebf944d7534c.js"></script>
  <style>
    .main .logo {
      margin-top: 0;
      height: auto;
    }

    .main .logo a {
      display: flex;
      align-items: center;
    }

    .main .logo .sub-title {
      margin-left: 0.5em;
      font-size: 22px;
      color: #fff;
      background: linear-gradient(-45deg, #3967FF, #B500FE);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }
  </style>
</head>
<body>
  <div class="main">
    <h1 class="logo"><a href="https://www.iconfont.cn/" title="iconfont 首页" target="_blank">
      <img width="200" src="https://img.alicdn.com/imgextra/i3/O1CN01Mn65HV1FfSEzR6DKv_!!6000000000514-55-tps-228-59.svg">
      
    </a></h1>
    <div class="nav-tabs">
      <ul id="tabs" class="dib-box">
        <li class="dib active"><span>Unicode</span></li>
        <li class="dib"><span>Font class</span></li>
        <li class="dib"><span>Symbol</span></li>
      </ul>
      
      <a href="https://www.iconfont.cn/manage/index?manage_type=myprojects&projectId=4468791" target="_blank" class="nav-more">查看项目</a>
      
    </div>
    <div class="tab-container">
      <div class="content unicode" style="display: block;">
          <ul class="icon_lists dib-box">
          
            <li class="dib">
              <span class="icon iconfont">&#xe618;</span>
                <div class="name">11_便捷_飞机</div>
                <div class="code-name">&amp;#xe618;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe859;</span>
                <div class="name">飞机</div>
                <div class="code-name">&amp;#xe859;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe87e;</span>
                <div class="name"> 定位小</div>
                <div class="code-name">&amp;#xe87e;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe881;</span>
                <div class="name"> 折扣</div>
                <div class="code-name">&amp;#xe881;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe887;</span>
                <div class="name"> 常用信息</div>
                <div class="code-name">&amp;#xe887;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe888;</span>
                <div class="name"> 返程机票</div>
                <div class="code-name">&amp;#xe888;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe889;</span>
                <div class="name"> 接送机</div>
                <div class="code-name">&amp;#xe889;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe88a;</span>
                <div class="name">导航</div>
                <div class="code-name">&amp;#xe88a;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe89b;</span>
                <div class="name"> 国际机票</div>
                <div class="code-name">&amp;#xe89b;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe89c;</span>
                <div class="name"> 机票</div>
                <div class="code-name">&amp;#xe89c;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe8bf;</span>
                <div class="name">飞机中</div>
                <div class="code-name">&amp;#xe8bf;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe8c8;</span>
                <div class="name"> 查询返程</div>
                <div class="code-name">&amp;#xe8c8;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe8c9;</span>
                <div class="name"> 查询出发到达</div>
                <div class="code-name">&amp;#xe8c9;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe8ca;</span>
                <div class="name">出发到达小</div>
                <div class="code-name">&amp;#xe8ca;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe8cb;</span>
                <div class="name">共享航班小</div>
                <div class="code-name">&amp;#xe8cb;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe8cc;</span>
                <div class="name">特价机票标签</div>
                <div class="code-name">&amp;#xe8cc;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe8cd;</span>
                <div class="name">航班延误</div>
                <div class="code-name">&amp;#xe8cd;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe8ce;</span>
                <div class="name">放心飞</div>
                <div class="code-name">&amp;#xe8ce;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe8cf;</span>
                <div class="name">切换城市</div>
                <div class="code-name">&amp;#xe8cf;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe8d0;</span>
                <div class="name">推荐汽车</div>
                <div class="code-name">&amp;#xe8d0;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe8d1;</span>
                <div class="name">卧铺</div>
                <div class="code-name">&amp;#xe8d1;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe8d2;</span>
                <div class="name">修改</div>
                <div class="code-name">&amp;#xe8d2;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe8d5;</span>
                <div class="name">历史行程</div>
                <div class="code-name">&amp;#xe8d5;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe8da;</span>
                <div class="name">往返低价</div>
                <div class="code-name">&amp;#xe8da;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe8db;</span>
                <div class="name">航班动态</div>
                <div class="code-name">&amp;#xe8db;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe8e2;</span>
                <div class="name">汽车班次</div>
                <div class="code-name">&amp;#xe8e2;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe8ef;</span>
                <div class="name">当日退</div>
                <div class="code-name">&amp;#xe8ef;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe8f2;</span>
                <div class="name"> 修改订单</div>
                <div class="code-name">&amp;#xe8f2;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe931;</span>
                <div class="name">目的地2</div>
                <div class="code-name">&amp;#xe931;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xeb32;</span>
                <div class="name">飞机_起飞</div>
                <div class="code-name">&amp;#xeb32;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xeb35;</span>
                <div class="name">飞机_降落</div>
                <div class="code-name">&amp;#xeb35;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe937;</span>
                <div class="name">座位</div>
                <div class="code-name">&amp;#xe937;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe941;</span>
                <div class="name">火车站2小</div>
                <div class="code-name">&amp;#xe941;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe942;</span>
                <div class="name">机场小</div>
                <div class="code-name">&amp;#xe942;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe603;</span>
                <div class="name">中国联航</div>
                <div class="code-name">&amp;#xe603;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe604;</span>
                <div class="name">中国邮政航空</div>
                <div class="code-name">&amp;#xe604;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe60d;</span>
                <div class="name">奥凯航空</div>
                <div class="code-name">&amp;#xe60d;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe60f;</span>
                <div class="name">扬子江航空</div>
                <div class="code-name">&amp;#xe60f;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe606;</span>
                <div class="name">中国国际航空_CA</div>
                <div class="code-name">&amp;#xe606;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe609;</span>
                <div class="name">中国南方航空_CZ</div>
                <div class="code-name">&amp;#xe609;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe60a;</span>
                <div class="name">吉祥航空_HO</div>
                <div class="code-name">&amp;#xe60a;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe60b;</span>
                <div class="name">祥鹏航空_8L</div>
                <div class="code-name">&amp;#xe60b;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe60c;</span>
                <div class="name">天津航空_GX</div>
                <div class="code-name">&amp;#xe60c;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe617;</span>
                <div class="name">四川航空_3U</div>
                <div class="code-name">&amp;#xe617;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe61c;</span>
                <div class="name">华夏航空_G5</div>
                <div class="code-name">&amp;#xe61c;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe61d;</span>
                <div class="name">海南航空_HU</div>
                <div class="code-name">&amp;#xe61d;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe61f;</span>
                <div class="name">厦门航空_MF</div>
                <div class="code-name">&amp;#xe61f;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe624;</span>
                <div class="name">上海航空_FM</div>
                <div class="code-name">&amp;#xe624;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe625;</span>
                <div class="name">首都航空_JD</div>
                <div class="code-name">&amp;#xe625;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe627;</span>
                <div class="name">河北航空_NS</div>
                <div class="code-name">&amp;#xe627;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe629;</span>
                <div class="name">昆明航空_KY</div>
                <div class="code-name">&amp;#xe629;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe62a;</span>
                <div class="name">西藏航空_TV</div>
                <div class="code-name">&amp;#xe62a;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe62b;</span>
                <div class="name">重庆航空_OQ</div>
                <div class="code-name">&amp;#xe62b;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe630;</span>
                <div class="name">东方航空_MU</div>
                <div class="code-name">&amp;#xe630;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe631;</span>
                <div class="name">山东航空_SC</div>
                <div class="code-name">&amp;#xe631;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe635;</span>
                <div class="name">深圳航空_ZH</div>
                <div class="code-name">&amp;#xe635;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe63a;</span>
                <div class="name">香港航空_HX</div>
                <div class="code-name">&amp;#xe63a;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe63c;</span>
                <div class="name">澳门航空_NX</div>
                <div class="code-name">&amp;#xe63c;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe646;</span>
                <div class="name">西部航空_PN</div>
                <div class="code-name">&amp;#xe646;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe650;</span>
                <div class="name">春秋航空</div>
                <div class="code-name">&amp;#xe650;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe600;</span>
                <div class="name">国泰航空</div>
                <div class="code-name">&amp;#xe600;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6b1;</span>
                <div class="name">鲲鹏航空</div>
                <div class="code-name">&amp;#xe6b1;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe620;</span>
                <div class="name">成都航空_EU</div>
                <div class="code-name">&amp;#xe620;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe608;</span>
                <div class="name">微断开关</div>
                <div class="code-name">&amp;#xe608;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe622;</span>
                <div class="name">double_arrow</div>
                <div class="code-name">&amp;#xe622;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe611;</span>
                <div class="name">double-down</div>
                <div class="code-name">&amp;#xe611;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe7d8;</span>
                <div class="name">read</div>
                <div class="code-name">&amp;#xe7d8;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6b0;</span>
                <div class="name">user</div>
                <div class="code-name">&amp;#xe6b0;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6af;</span>
                <div class="name">reward</div>
                <div class="code-name">&amp;#xe6af;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6ae;</span>
                <div class="name">play</div>
                <div class="code-name">&amp;#xe6ae;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe867;</span>
                <div class="name">moon</div>
                <div class="code-name">&amp;#xe867;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe886;</span>
                <div class="name">sun</div>
                <div class="code-name">&amp;#xe886;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe66d;</span>
                <div class="name">icon-caret-up</div>
                <div class="code-name">&amp;#xe66d;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe66e;</span>
                <div class="name">icon-close</div>
                <div class="code-name">&amp;#xe66e;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe66f;</span>
                <div class="name">icon-caret-right</div>
                <div class="code-name">&amp;#xe66f;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe670;</span>
                <div class="name">icon-cleared</div>
                <div class="code-name">&amp;#xe670;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe671;</span>
                <div class="name">icon-check</div>
                <div class="code-name">&amp;#xe671;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe672;</span>
                <div class="name">icon-down</div>
                <div class="code-name">&amp;#xe672;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe673;</span>
                <div class="name">icon-download</div>
                <div class="code-name">&amp;#xe673;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe674;</span>
                <div class="name">icon-copy</div>
                <div class="code-name">&amp;#xe674;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe675;</span>
                <div class="name">icon-cloud-upload</div>
                <div class="code-name">&amp;#xe675;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe676;</span>
                <div class="name">icon-edit</div>
                <div class="code-name">&amp;#xe676;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe677;</span>
                <div class="name">icon-release</div>
                <div class="code-name">&amp;#xe677;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe678;</span>
                <div class="name">icon-delete</div>
                <div class="code-name">&amp;#xe678;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe679;</span>
                <div class="name">icon-increase</div>
                <div class="code-name">&amp;#xe679;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe67a;</span>
                <div class="name">icon-right</div>
                <div class="code-name">&amp;#xe67a;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe67b;</span>
                <div class="name">icon-list</div>
                <div class="code-name">&amp;#xe67b;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe67c;</span>
                <div class="name">icon-more-vertical</div>
                <div class="code-name">&amp;#xe67c;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe67d;</span>
                <div class="name">icon-search</div>
                <div class="code-name">&amp;#xe67d;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe67e;</span>
                <div class="name">icon-up</div>
                <div class="code-name">&amp;#xe67e;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe67f;</span>
                <div class="name">icon-given</div>
                <div class="code-name">&amp;#xe67f;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe680;</span>
                <div class="name">icon-left</div>
                <div class="code-name">&amp;#xe680;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe681;</span>
                <div class="name">icon-plus</div>
                <div class="code-name">&amp;#xe681;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe682;</span>
                <div class="name">icon-account</div>
                <div class="code-name">&amp;#xe682;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe683;</span>
                <div class="name">icon-agreement</div>
                <div class="code-name">&amp;#xe683;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe684;</span>
                <div class="name">icon-adapt-down</div>
                <div class="code-name">&amp;#xe684;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe685;</span>
                <div class="name">icon-cancellation</div>
                <div class="code-name">&amp;#xe685;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe686;</span>
                <div class="name">icon-closed</div>
                <div class="code-name">&amp;#xe686;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe687;</span>
                <div class="name">icon-business</div>
                <div class="code-name">&amp;#xe687;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe688;</span>
                <div class="name">icon-an-application</div>
                <div class="code-name">&amp;#xe688;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe689;</span>
                <div class="name">icon-annex</div>
                <div class="code-name">&amp;#xe689;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe68a;</span>
                <div class="name">icon-binding</div>
                <div class="code-name">&amp;#xe68a;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe68b;</span>
                <div class="name">icon-controls</div>
                <div class="code-name">&amp;#xe68b;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe68c;</span>
                <div class="name">icon-drag</div>
                <div class="code-name">&amp;#xe68c;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe68d;</span>
                <div class="name">icon-disable</div>
                <div class="code-name">&amp;#xe68d;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe68e;</span>
                <div class="name">icon-exit</div>
                <div class="code-name">&amp;#xe68e;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe68f;</span>
                <div class="name">icon-copy2</div>
                <div class="code-name">&amp;#xe68f;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe690;</span>
                <div class="name">icon-eye-close</div>
                <div class="code-name">&amp;#xe690;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe691;</span>
                <div class="name">icon-eye-open</div>
                <div class="code-name">&amp;#xe691;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe692;</span>
                <div class="name">icon-file-print</div>
                <div class="code-name">&amp;#xe692;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe693;</span>
                <div class="name">icon-handle</div>
                <div class="code-name">&amp;#xe693;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe694;</span>
                <div class="name">icon-file-store</div>
                <div class="code-name">&amp;#xe694;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe695;</span>
                <div class="name">icon-initiate</div>
                <div class="code-name">&amp;#xe695;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe696;</span>
                <div class="name">icon-gji</div>
                <div class="code-name">&amp;#xe696;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe697;</span>
                <div class="name">icon-forward</div>
                <div class="code-name">&amp;#xe697;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe698;</span>
                <div class="name">icon-mailbox</div>
                <div class="code-name">&amp;#xe698;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe699;</span>
                <div class="name">icon-inspect</div>
                <div class="code-name">&amp;#xe699;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe69a;</span>
                <div class="name">icon-password</div>
                <div class="code-name">&amp;#xe69a;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe69b;</span>
                <div class="name">icon-orders</div>
                <div class="code-name">&amp;#xe69b;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe69c;</span>
                <div class="name">icon-more-circle</div>
                <div class="code-name">&amp;#xe69c;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe69d;</span>
                <div class="name">icon-remove</div>
                <div class="code-name">&amp;#xe69d;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe69e;</span>
                <div class="name">icon-phone</div>
                <div class="code-name">&amp;#xe69e;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe69f;</span>
                <div class="name">icon-renew</div>
                <div class="code-name">&amp;#xe69f;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6a0;</span>
                <div class="name">icon-refresh</div>
                <div class="code-name">&amp;#xe6a0;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6a1;</span>
                <div class="name">icon-right2</div>
                <div class="code-name">&amp;#xe6a1;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6a2;</span>
                <div class="name">icon-revoke</div>
                <div class="code-name">&amp;#xe6a2;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6a3;</span>
                <div class="name">icon-respon</div>
                <div class="code-name">&amp;#xe6a3;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6a4;</span>
                <div class="name">icon-scan-code</div>
                <div class="code-name">&amp;#xe6a4;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6a5;</span>
                <div class="name">icon-restore</div>
                <div class="code-name">&amp;#xe6a5;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6a6;</span>
                <div class="name">icon-shift</div>
                <div class="code-name">&amp;#xe6a6;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6a7;</span>
                <div class="name">icon-start</div>
                <div class="code-name">&amp;#xe6a7;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6a8;</span>
                <div class="name">icon-set-up</div>
                <div class="code-name">&amp;#xe6a8;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6a9;</span>
                <div class="name">icon-stop</div>
                <div class="code-name">&amp;#xe6a9;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6aa;</span>
                <div class="name">icon-suspend</div>
                <div class="code-name">&amp;#xe6aa;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6ab;</span>
                <div class="name">icon-sync</div>
                <div class="code-name">&amp;#xe6ab;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6ac;</span>
                <div class="name">icon-update-records</div>
                <div class="code-name">&amp;#xe6ac;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6ad;</span>
                <div class="name">icon-unlock</div>
                <div class="code-name">&amp;#xe6ad;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe656;</span>
                <div class="name">icon-full-screen</div>
                <div class="code-name">&amp;#xe656;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe657;</span>
                <div class="name">icon-home</div>
                <div class="code-name">&amp;#xe657;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe658;</span>
                <div class="name">icon-file-information</div>
                <div class="code-name">&amp;#xe658;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe659;</span>
                <div class="name">icon-data-model</div>
                <div class="code-name">&amp;#xe659;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe65a;</span>
                <div class="name">icon-message</div>
                <div class="code-name">&amp;#xe65a;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe65b;</span>
                <div class="name">icon-menu-expand</div>
                <div class="code-name">&amp;#xe65b;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe65c;</span>
                <div class="name">icon-surface-circle </div>
                <div class="code-name">&amp;#xe65c;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe65d;</span>
                <div class="name">icon-eye-pull</div>
                <div class="code-name">&amp;#xe65d;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe65e;</span>
                <div class="name">icon-hour</div>
                <div class="code-name">&amp;#xe65e;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe65f;</span>
                <div class="name">icon-technologies</div>
                <div class="code-name">&amp;#xe65f;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe660;</span>
                <div class="name">icon-menu-fold</div>
                <div class="code-name">&amp;#xe660;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe661;</span>
                <div class="name">icon-classified</div>
                <div class="code-name">&amp;#xe661;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe662;</span>
                <div class="name">icon-translate</div>
                <div class="code-name">&amp;#xe662;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe663;</span>
                <div class="name">icon-question-circle</div>
                <div class="code-name">&amp;#xe663;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe664;</span>
                <div class="name">icon-exclamation</div>
                <div class="code-name">&amp;#xe664;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe665;</span>
                <div class="name">icon-circle-fill</div>
                <div class="code-name">&amp;#xe665;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe666;</span>
                <div class="name">icon-circle-answer</div>
                <div class="code-name">&amp;#xe666;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe667;</span>
                <div class="name">icon-circle-exclamation</div>
                <div class="code-name">&amp;#xe667;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe668;</span>
                <div class="name">icon-sifting</div>
                <div class="code-name">&amp;#xe668;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe669;</span>
                <div class="name">icon-filter</div>
                <div class="code-name">&amp;#xe669;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe66a;</span>
                <div class="name">icon-caret-left</div>
                <div class="code-name">&amp;#xe66a;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe66b;</span>
                <div class="name">icon-caret-vertical</div>
                <div class="code-name">&amp;#xe66b;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe66c;</span>
                <div class="name">icon-caret-down</div>
                <div class="code-name">&amp;#xe66c;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe61e;</span>
                <div class="name">gitee</div>
                <div class="code-name">&amp;#xe61e;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe615;</span>
                <div class="name">gitee</div>
                <div class="code-name">&amp;#xe615;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe885;</span>
                <div class="name">github-fill</div>
                <div class="code-name">&amp;#xe885;</div>
              </li>
          
          </ul>
          <div class="article markdown">
          <h2 id="unicode-">Unicode 引用</h2>
          <hr>

          <p>Unicode 是字体在网页端最原始的应用方式，特点是：</p>
          <ul>
            <li>支持按字体的方式去动态调整图标大小，颜色等等。</li>
            <li>默认情况下不支持多色，直接添加多色图标会自动去色。</li>
          </ul>
          <blockquote>
            <p>注意：新版 iconfont 支持两种方式引用多色图标：SVG symbol 引用方式和彩色字体图标模式。（使用彩色字体图标需要在「编辑项目」中开启「彩色」选项后并重新生成。）</p>
          </blockquote>
          <p>Unicode 使用步骤如下：</p>
          <h3 id="-font-face">第一步：拷贝项目下面生成的 <code>@font-face</code></h3>
<pre><code class="language-css"
>@font-face {
  font-family: 'iconfont';
  src: url('iconfont.woff2?t=1713968346966') format('woff2'),
       url('iconfont.woff?t=1713968346966') format('woff'),
       url('iconfont.ttf?t=1713968346966') format('truetype');
}
</code></pre>
          <h3 id="-iconfont-">第二步：定义使用 iconfont 的样式</h3>
<pre><code class="language-css"
>.iconfont {
  font-family: "iconfont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
</code></pre>
          <h3 id="-">第三步：挑选相应图标并获取字体编码，应用于页面</h3>
<pre>
<code class="language-html"
>&lt;span class="iconfont"&gt;&amp;#x33;&lt;/span&gt;
</code></pre>
          <blockquote>
            <p>"iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。</p>
          </blockquote>
          </div>
      </div>
      <div class="content font-class">
        <ul class="icon_lists dib-box">
          
          <li class="dib">
            <span class="icon iconfont icon-_bianjie_feiji"></span>
            <div class="name">
              11_便捷_飞机
            </div>
            <div class="code-name">.icon-_bianjie_feiji
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-feiji"></span>
            <div class="name">
              飞机
            </div>
            <div class="code-name">.icon-feiji
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-dingweixiao"></span>
            <div class="name">
               定位小
            </div>
            <div class="code-name">.icon-dingweixiao
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-zhekou"></span>
            <div class="name">
               折扣
            </div>
            <div class="code-name">.icon-zhekou
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-changyongxinxi"></span>
            <div class="name">
               常用信息
            </div>
            <div class="code-name">.icon-changyongxinxi
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-fanchengjipiao"></span>
            <div class="name">
               返程机票
            </div>
            <div class="code-name">.icon-fanchengjipiao
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-jiesongji"></span>
            <div class="name">
               接送机
            </div>
            <div class="code-name">.icon-jiesongji
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-daohang"></span>
            <div class="name">
              导航
            </div>
            <div class="code-name">.icon-daohang
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-guojijipiao"></span>
            <div class="name">
               国际机票
            </div>
            <div class="code-name">.icon-guojijipiao
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-jipiao"></span>
            <div class="name">
               机票
            </div>
            <div class="code-name">.icon-jipiao
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-feijizhong"></span>
            <div class="name">
              飞机中
            </div>
            <div class="code-name">.icon-feijizhong
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-chaxunfancheng"></span>
            <div class="name">
               查询返程
            </div>
            <div class="code-name">.icon-chaxunfancheng
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-chaxunchufadaoda"></span>
            <div class="name">
               查询出发到达
            </div>
            <div class="code-name">.icon-chaxunchufadaoda
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-chufadaodaxiao"></span>
            <div class="name">
              出发到达小
            </div>
            <div class="code-name">.icon-chufadaodaxiao
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-gongxianghangbanxiao"></span>
            <div class="name">
              共享航班小
            </div>
            <div class="code-name">.icon-gongxianghangbanxiao
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-tejiajipiaobiaoqian"></span>
            <div class="name">
              特价机票标签
            </div>
            <div class="code-name">.icon-tejiajipiaobiaoqian
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-hangbanyanwu"></span>
            <div class="name">
              航班延误
            </div>
            <div class="code-name">.icon-hangbanyanwu
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-fangxinfei"></span>
            <div class="name">
              放心飞
            </div>
            <div class="code-name">.icon-fangxinfei
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-qiehuanchengshi"></span>
            <div class="name">
              切换城市
            </div>
            <div class="code-name">.icon-qiehuanchengshi
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-tuijianqiche"></span>
            <div class="name">
              推荐汽车
            </div>
            <div class="code-name">.icon-tuijianqiche
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-wopu"></span>
            <div class="name">
              卧铺
            </div>
            <div class="code-name">.icon-wopu
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-xiugai"></span>
            <div class="name">
              修改
            </div>
            <div class="code-name">.icon-xiugai
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-lishihangcheng"></span>
            <div class="name">
              历史行程
            </div>
            <div class="code-name">.icon-lishihangcheng
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-wangfandijia"></span>
            <div class="name">
              往返低价
            </div>
            <div class="code-name">.icon-wangfandijia
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-hangbandongtai"></span>
            <div class="name">
              航班动态
            </div>
            <div class="code-name">.icon-hangbandongtai
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-qichebanci"></span>
            <div class="name">
              汽车班次
            </div>
            <div class="code-name">.icon-qichebanci
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-dangritui"></span>
            <div class="name">
              当日退
            </div>
            <div class="code-name">.icon-dangritui
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-xiugaidingdan"></span>
            <div class="name">
               修改订单
            </div>
            <div class="code-name">.icon-xiugaidingdan
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-mudedi"></span>
            <div class="name">
              目的地2
            </div>
            <div class="code-name">.icon-mudedi
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-feiji_qifei"></span>
            <div class="name">
              飞机_起飞
            </div>
            <div class="code-name">.icon-feiji_qifei
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-feiji_jiangla"></span>
            <div class="name">
              飞机_降落
            </div>
            <div class="code-name">.icon-feiji_jiangla
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-zuowei"></span>
            <div class="name">
              座位
            </div>
            <div class="code-name">.icon-zuowei
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-huochezhanxiao"></span>
            <div class="name">
              火车站2小
            </div>
            <div class="code-name">.icon-huochezhanxiao
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-jichangxiao"></span>
            <div class="name">
              机场小
            </div>
            <div class="code-name">.icon-jichangxiao
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-zhongguolianhang"></span>
            <div class="name">
              中国联航
            </div>
            <div class="code-name">.icon-zhongguolianhang
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-zhongguoyouzhenghangkong"></span>
            <div class="name">
              中国邮政航空
            </div>
            <div class="code-name">.icon-zhongguoyouzhenghangkong
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-aokaihangkong"></span>
            <div class="name">
              奥凯航空
            </div>
            <div class="code-name">.icon-aokaihangkong
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-yangzijianghangkong"></span>
            <div class="name">
              扬子江航空
            </div>
            <div class="code-name">.icon-yangzijianghangkong
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-zhongguoguojihangkong_CA"></span>
            <div class="name">
              中国国际航空_CA
            </div>
            <div class="code-name">.icon-zhongguoguojihangkong_CA
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-zhongguonanfanghangkong_CZ"></span>
            <div class="name">
              中国南方航空_CZ
            </div>
            <div class="code-name">.icon-zhongguonanfanghangkong_CZ
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-jixianghangkong_HO"></span>
            <div class="name">
              吉祥航空_HO
            </div>
            <div class="code-name">.icon-jixianghangkong_HO
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-xiangpenghangkong_L"></span>
            <div class="name">
              祥鹏航空_8L
            </div>
            <div class="code-name">.icon-xiangpenghangkong_L
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-tianjinhangkong_GX"></span>
            <div class="name">
              天津航空_GX
            </div>
            <div class="code-name">.icon-tianjinhangkong_GX
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-sichuanhangkong_U"></span>
            <div class="name">
              四川航空_3U
            </div>
            <div class="code-name">.icon-sichuanhangkong_U
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-huaxiahangkong_G"></span>
            <div class="name">
              华夏航空_G5
            </div>
            <div class="code-name">.icon-huaxiahangkong_G
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-hainanhangkong_HU"></span>
            <div class="name">
              海南航空_HU
            </div>
            <div class="code-name">.icon-hainanhangkong_HU
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-shamenhangkong_MF"></span>
            <div class="name">
              厦门航空_MF
            </div>
            <div class="code-name">.icon-shamenhangkong_MF
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-shanghaihangkong_FM"></span>
            <div class="name">
              上海航空_FM
            </div>
            <div class="code-name">.icon-shanghaihangkong_FM
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-shouduhangkong_JD"></span>
            <div class="name">
              首都航空_JD
            </div>
            <div class="code-name">.icon-shouduhangkong_JD
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-hebeihangkong_NS"></span>
            <div class="name">
              河北航空_NS
            </div>
            <div class="code-name">.icon-hebeihangkong_NS
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-kunminghangkong_KY"></span>
            <div class="name">
              昆明航空_KY
            </div>
            <div class="code-name">.icon-kunminghangkong_KY
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-xicanghangkong_TV"></span>
            <div class="name">
              西藏航空_TV
            </div>
            <div class="code-name">.icon-xicanghangkong_TV
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-zhongqinghangkong_OQ"></span>
            <div class="name">
              重庆航空_OQ
            </div>
            <div class="code-name">.icon-zhongqinghangkong_OQ
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-dongfanghangkong_MU"></span>
            <div class="name">
              东方航空_MU
            </div>
            <div class="code-name">.icon-dongfanghangkong_MU
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-shandonghangkong_SC"></span>
            <div class="name">
              山东航空_SC
            </div>
            <div class="code-name">.icon-shandonghangkong_SC
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-shenzhenhangkong_ZH"></span>
            <div class="name">
              深圳航空_ZH
            </div>
            <div class="code-name">.icon-shenzhenhangkong_ZH
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-xiangganghangkong_HX"></span>
            <div class="name">
              香港航空_HX
            </div>
            <div class="code-name">.icon-xiangganghangkong_HX
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-aomenhangkong_NX"></span>
            <div class="name">
              澳门航空_NX
            </div>
            <div class="code-name">.icon-aomenhangkong_NX
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-xibuhangkong_PN"></span>
            <div class="name">
              西部航空_PN
            </div>
            <div class="code-name">.icon-xibuhangkong_PN
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-chunqiuhangkong"></span>
            <div class="name">
              春秋航空
            </div>
            <div class="code-name">.icon-chunqiuhangkong
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-guotaihangkong"></span>
            <div class="name">
              国泰航空
            </div>
            <div class="code-name">.icon-guotaihangkong
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-kunpenghangkong"></span>
            <div class="name">
              鲲鹏航空
            </div>
            <div class="code-name">.icon-kunpenghangkong
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-chengduhangkong"></span>
            <div class="name">
              成都航空_EU
            </div>
            <div class="code-name">.icon-chengduhangkong
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-a-weiduankaiguan3x"></span>
            <div class="name">
              微断开关
            </div>
            <div class="code-name">.icon-a-weiduankaiguan3x
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-double_arrow"></span>
            <div class="name">
              double_arrow
            </div>
            <div class="code-name">.icon-double_arrow
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-double-down"></span>
            <div class="name">
              double-down
            </div>
            <div class="code-name">.icon-double-down
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-read"></span>
            <div class="name">
              read
            </div>
            <div class="code-name">.icon-read
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-user"></span>
            <div class="name">
              user
            </div>
            <div class="code-name">.icon-user
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-reward"></span>
            <div class="name">
              reward
            </div>
            <div class="code-name">.icon-reward
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-play"></span>
            <div class="name">
              play
            </div>
            <div class="code-name">.icon-play
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-moon"></span>
            <div class="name">
              moon
            </div>
            <div class="code-name">.icon-moon
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-sun"></span>
            <div class="name">
              sun
            </div>
            <div class="code-name">.icon-sun
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-icon-caret-up"></span>
            <div class="name">
              icon-caret-up
            </div>
            <div class="code-name">.icon-icon-caret-up
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-icon-close"></span>
            <div class="name">
              icon-close
            </div>
            <div class="code-name">.icon-icon-close
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-icon-caret-right"></span>
            <div class="name">
              icon-caret-right
            </div>
            <div class="code-name">.icon-icon-caret-right
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-icon-cleared"></span>
            <div class="name">
              icon-cleared
            </div>
            <div class="code-name">.icon-icon-cleared
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-icon-check"></span>
            <div class="name">
              icon-check
            </div>
            <div class="code-name">.icon-icon-check
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-icon-down"></span>
            <div class="name">
              icon-down
            </div>
            <div class="code-name">.icon-icon-down
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-icon-download"></span>
            <div class="name">
              icon-download
            </div>
            <div class="code-name">.icon-icon-download
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-icon-copy"></span>
            <div class="name">
              icon-copy
            </div>
            <div class="code-name">.icon-icon-copy
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-icon-cloud-upload"></span>
            <div class="name">
              icon-cloud-upload
            </div>
            <div class="code-name">.icon-icon-cloud-upload
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-icon-edit"></span>
            <div class="name">
              icon-edit
            </div>
            <div class="code-name">.icon-icon-edit
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-icon-release"></span>
            <div class="name">
              icon-release
            </div>
            <div class="code-name">.icon-icon-release
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-icon-delete"></span>
            <div class="name">
              icon-delete
            </div>
            <div class="code-name">.icon-icon-delete
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-icon-increase"></span>
            <div class="name">
              icon-increase
            </div>
            <div class="code-name">.icon-icon-increase
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-icon-right"></span>
            <div class="name">
              icon-right
            </div>
            <div class="code-name">.icon-icon-right
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-icon-list"></span>
            <div class="name">
              icon-list
            </div>
            <div class="code-name">.icon-icon-list
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-icon-more-vertical"></span>
            <div class="name">
              icon-more-vertical
            </div>
            <div class="code-name">.icon-icon-more-vertical
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-icon-search"></span>
            <div class="name">
              icon-search
            </div>
            <div class="code-name">.icon-icon-search
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-icon-up"></span>
            <div class="name">
              icon-up
            </div>
            <div class="code-name">.icon-icon-up
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-icon-given"></span>
            <div class="name">
              icon-given
            </div>
            <div class="code-name">.icon-icon-given
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-icon-left"></span>
            <div class="name">
              icon-left
            </div>
            <div class="code-name">.icon-icon-left
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-icon-plus"></span>
            <div class="name">
              icon-plus
            </div>
            <div class="code-name">.icon-icon-plus
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-icon-account"></span>
            <div class="name">
              icon-account
            </div>
            <div class="code-name">.icon-icon-account
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-icon-agreement"></span>
            <div class="name">
              icon-agreement
            </div>
            <div class="code-name">.icon-icon-agreement
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-icon-adapt-down"></span>
            <div class="name">
              icon-adapt-down
            </div>
            <div class="code-name">.icon-icon-adapt-down
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-icon-cancellation"></span>
            <div class="name">
              icon-cancellation
            </div>
            <div class="code-name">.icon-icon-cancellation
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-icon-closed"></span>
            <div class="name">
              icon-closed
            </div>
            <div class="code-name">.icon-icon-closed
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-icon-business"></span>
            <div class="name">
              icon-business
            </div>
            <div class="code-name">.icon-icon-business
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-icon-an-application"></span>
            <div class="name">
              icon-an-application
            </div>
            <div class="code-name">.icon-icon-an-application
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-icon-annex"></span>
            <div class="name">
              icon-annex
            </div>
            <div class="code-name">.icon-icon-annex
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-icon-binding"></span>
            <div class="name">
              icon-binding
            </div>
            <div class="code-name">.icon-icon-binding
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-icon-controls"></span>
            <div class="name">
              icon-controls
            </div>
            <div class="code-name">.icon-icon-controls
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-icon-drag"></span>
            <div class="name">
              icon-drag
            </div>
            <div class="code-name">.icon-icon-drag
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-icon-disable"></span>
            <div class="name">
              icon-disable
            </div>
            <div class="code-name">.icon-icon-disable
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-icon-exit"></span>
            <div class="name">
              icon-exit
            </div>
            <div class="code-name">.icon-icon-exit
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-icon-copy2"></span>
            <div class="name">
              icon-copy2
            </div>
            <div class="code-name">.icon-icon-copy2
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-icon-eye-close"></span>
            <div class="name">
              icon-eye-close
            </div>
            <div class="code-name">.icon-icon-eye-close
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-icon-eye-open"></span>
            <div class="name">
              icon-eye-open
            </div>
            <div class="code-name">.icon-icon-eye-open
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-icon-file-print"></span>
            <div class="name">
              icon-file-print
            </div>
            <div class="code-name">.icon-icon-file-print
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-icon-handle"></span>
            <div class="name">
              icon-handle
            </div>
            <div class="code-name">.icon-icon-handle
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-icon-file-store"></span>
            <div class="name">
              icon-file-store
            </div>
            <div class="code-name">.icon-icon-file-store
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-icon-initiate"></span>
            <div class="name">
              icon-initiate
            </div>
            <div class="code-name">.icon-icon-initiate
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-icon-gji"></span>
            <div class="name">
              icon-gji
            </div>
            <div class="code-name">.icon-icon-gji
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-icon-forward"></span>
            <div class="name">
              icon-forward
            </div>
            <div class="code-name">.icon-icon-forward
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-icon-mailbox"></span>
            <div class="name">
              icon-mailbox
            </div>
            <div class="code-name">.icon-icon-mailbox
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-icon-inspect"></span>
            <div class="name">
              icon-inspect
            </div>
            <div class="code-name">.icon-icon-inspect
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-icon-password"></span>
            <div class="name">
              icon-password
            </div>
            <div class="code-name">.icon-icon-password
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-icon-orders"></span>
            <div class="name">
              icon-orders
            </div>
            <div class="code-name">.icon-icon-orders
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-icon-more-circle"></span>
            <div class="name">
              icon-more-circle
            </div>
            <div class="code-name">.icon-icon-more-circle
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-icon-remove"></span>
            <div class="name">
              icon-remove
            </div>
            <div class="code-name">.icon-icon-remove
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-icon-phone"></span>
            <div class="name">
              icon-phone
            </div>
            <div class="code-name">.icon-icon-phone
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-icon-renew"></span>
            <div class="name">
              icon-renew
            </div>
            <div class="code-name">.icon-icon-renew
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-icon-refresh"></span>
            <div class="name">
              icon-refresh
            </div>
            <div class="code-name">.icon-icon-refresh
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-icon-right2"></span>
            <div class="name">
              icon-right2
            </div>
            <div class="code-name">.icon-icon-right2
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-icon-revoke"></span>
            <div class="name">
              icon-revoke
            </div>
            <div class="code-name">.icon-icon-revoke
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-icon-respon"></span>
            <div class="name">
              icon-respon
            </div>
            <div class="code-name">.icon-icon-respon
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-icon-scan-code"></span>
            <div class="name">
              icon-scan-code
            </div>
            <div class="code-name">.icon-icon-scan-code
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-icon-restore"></span>
            <div class="name">
              icon-restore
            </div>
            <div class="code-name">.icon-icon-restore
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-icon-shift"></span>
            <div class="name">
              icon-shift
            </div>
            <div class="code-name">.icon-icon-shift
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-icon-start"></span>
            <div class="name">
              icon-start
            </div>
            <div class="code-name">.icon-icon-start
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-icon-set-up"></span>
            <div class="name">
              icon-set-up
            </div>
            <div class="code-name">.icon-icon-set-up
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-icon-stop"></span>
            <div class="name">
              icon-stop
            </div>
            <div class="code-name">.icon-icon-stop
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-icon-suspend"></span>
            <div class="name">
              icon-suspend
            </div>
            <div class="code-name">.icon-icon-suspend
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-icon-sync"></span>
            <div class="name">
              icon-sync
            </div>
            <div class="code-name">.icon-icon-sync
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-icon-update-records"></span>
            <div class="name">
              icon-update-records
            </div>
            <div class="code-name">.icon-icon-update-records
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-icon-unlock"></span>
            <div class="name">
              icon-unlock
            </div>
            <div class="code-name">.icon-icon-unlock
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-icon-full-screen"></span>
            <div class="name">
              icon-full-screen
            </div>
            <div class="code-name">.icon-icon-full-screen
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-icon-home"></span>
            <div class="name">
              icon-home
            </div>
            <div class="code-name">.icon-icon-home
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-icon-file-information"></span>
            <div class="name">
              icon-file-information
            </div>
            <div class="code-name">.icon-icon-file-information
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-icon-data-model"></span>
            <div class="name">
              icon-data-model
            </div>
            <div class="code-name">.icon-icon-data-model
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-icon-message"></span>
            <div class="name">
              icon-message
            </div>
            <div class="code-name">.icon-icon-message
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-icon-menu-expand"></span>
            <div class="name">
              icon-menu-expand
            </div>
            <div class="code-name">.icon-icon-menu-expand
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-icon-surface-circle"></span>
            <div class="name">
              icon-surface-circle 
            </div>
            <div class="code-name">.icon-icon-surface-circle
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-icon-eye-pull"></span>
            <div class="name">
              icon-eye-pull
            </div>
            <div class="code-name">.icon-icon-eye-pull
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-icon-hour"></span>
            <div class="name">
              icon-hour
            </div>
            <div class="code-name">.icon-icon-hour
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-icon-technologies"></span>
            <div class="name">
              icon-technologies
            </div>
            <div class="code-name">.icon-icon-technologies
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-icon-menu-fold"></span>
            <div class="name">
              icon-menu-fold
            </div>
            <div class="code-name">.icon-icon-menu-fold
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-icon-classified"></span>
            <div class="name">
              icon-classified
            </div>
            <div class="code-name">.icon-icon-classified
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-icon-translate"></span>
            <div class="name">
              icon-translate
            </div>
            <div class="code-name">.icon-icon-translate
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-icon-question-circle"></span>
            <div class="name">
              icon-question-circle
            </div>
            <div class="code-name">.icon-icon-question-circle
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-icon-exclamation"></span>
            <div class="name">
              icon-exclamation
            </div>
            <div class="code-name">.icon-icon-exclamation
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-icon-circle-fill"></span>
            <div class="name">
              icon-circle-fill
            </div>
            <div class="code-name">.icon-icon-circle-fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-icon-circle-answer"></span>
            <div class="name">
              icon-circle-answer
            </div>
            <div class="code-name">.icon-icon-circle-answer
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-icon-circle-exclamation"></span>
            <div class="name">
              icon-circle-exclamation
            </div>
            <div class="code-name">.icon-icon-circle-exclamation
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-icon-sifting"></span>
            <div class="name">
              icon-sifting
            </div>
            <div class="code-name">.icon-icon-sifting
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-icon-filter"></span>
            <div class="name">
              icon-filter
            </div>
            <div class="code-name">.icon-icon-filter
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-icon-caret-left"></span>
            <div class="name">
              icon-caret-left
            </div>
            <div class="code-name">.icon-icon-caret-left
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-icon-caret-vertical"></span>
            <div class="name">
              icon-caret-vertical
            </div>
            <div class="code-name">.icon-icon-caret-vertical
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-icon-caret-down"></span>
            <div class="name">
              icon-caret-down
            </div>
            <div class="code-name">.icon-icon-caret-down
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-gitee1"></span>
            <div class="name">
              gitee
            </div>
            <div class="code-name">.icon-gitee1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-gitee2"></span>
            <div class="name">
              gitee
            </div>
            <div class="code-name">.icon-gitee2
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-github-fill"></span>
            <div class="name">
              github-fill
            </div>
            <div class="code-name">.icon-github-fill
            </div>
          </li>
          
        </ul>
        <div class="article markdown">
        <h2 id="font-class-">font-class 引用</h2>
        <hr>

        <p>font-class 是 Unicode 使用方式的一种变种，主要是解决 Unicode 书写不直观，语意不明确的问题。</p>
        <p>与 Unicode 使用方式相比，具有如下特点：</p>
        <ul>
          <li>相比于 Unicode 语意明确，书写更直观。可以很容易分辨这个 icon 是什么。</li>
          <li>因为使用 class 来定义图标，所以当要替换图标时，只需要修改 class 里面的 Unicode 引用。</li>
        </ul>
        <p>使用步骤如下：</p>
        <h3 id="-fontclass-">第一步：引入项目下面生成的 fontclass 代码：</h3>
<pre><code class="language-html">&lt;link rel="stylesheet" href="./iconfont.css"&gt;
</code></pre>
        <h3 id="-">第二步：挑选相应图标并获取类名，应用于页面：</h3>
<pre><code class="language-html">&lt;span class="iconfont icon-xxx"&gt;&lt;/span&gt;
</code></pre>
        <blockquote>
          <p>"
            iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。</p>
        </blockquote>
      </div>
      </div>
      <div class="content symbol">
          <ul class="icon_lists dib-box">
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-_bianjie_feiji"></use>
                </svg>
                <div class="name">11_便捷_飞机</div>
                <div class="code-name">#icon-_bianjie_feiji</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-feiji"></use>
                </svg>
                <div class="name">飞机</div>
                <div class="code-name">#icon-feiji</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-dingweixiao"></use>
                </svg>
                <div class="name"> 定位小</div>
                <div class="code-name">#icon-dingweixiao</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-zhekou"></use>
                </svg>
                <div class="name"> 折扣</div>
                <div class="code-name">#icon-zhekou</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-changyongxinxi"></use>
                </svg>
                <div class="name"> 常用信息</div>
                <div class="code-name">#icon-changyongxinxi</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-fanchengjipiao"></use>
                </svg>
                <div class="name"> 返程机票</div>
                <div class="code-name">#icon-fanchengjipiao</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-jiesongji"></use>
                </svg>
                <div class="name"> 接送机</div>
                <div class="code-name">#icon-jiesongji</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-daohang"></use>
                </svg>
                <div class="name">导航</div>
                <div class="code-name">#icon-daohang</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-guojijipiao"></use>
                </svg>
                <div class="name"> 国际机票</div>
                <div class="code-name">#icon-guojijipiao</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-jipiao"></use>
                </svg>
                <div class="name"> 机票</div>
                <div class="code-name">#icon-jipiao</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-feijizhong"></use>
                </svg>
                <div class="name">飞机中</div>
                <div class="code-name">#icon-feijizhong</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-chaxunfancheng"></use>
                </svg>
                <div class="name"> 查询返程</div>
                <div class="code-name">#icon-chaxunfancheng</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-chaxunchufadaoda"></use>
                </svg>
                <div class="name"> 查询出发到达</div>
                <div class="code-name">#icon-chaxunchufadaoda</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-chufadaodaxiao"></use>
                </svg>
                <div class="name">出发到达小</div>
                <div class="code-name">#icon-chufadaodaxiao</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-gongxianghangbanxiao"></use>
                </svg>
                <div class="name">共享航班小</div>
                <div class="code-name">#icon-gongxianghangbanxiao</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-tejiajipiaobiaoqian"></use>
                </svg>
                <div class="name">特价机票标签</div>
                <div class="code-name">#icon-tejiajipiaobiaoqian</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-hangbanyanwu"></use>
                </svg>
                <div class="name">航班延误</div>
                <div class="code-name">#icon-hangbanyanwu</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-fangxinfei"></use>
                </svg>
                <div class="name">放心飞</div>
                <div class="code-name">#icon-fangxinfei</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-qiehuanchengshi"></use>
                </svg>
                <div class="name">切换城市</div>
                <div class="code-name">#icon-qiehuanchengshi</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-tuijianqiche"></use>
                </svg>
                <div class="name">推荐汽车</div>
                <div class="code-name">#icon-tuijianqiche</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-wopu"></use>
                </svg>
                <div class="name">卧铺</div>
                <div class="code-name">#icon-wopu</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-xiugai"></use>
                </svg>
                <div class="name">修改</div>
                <div class="code-name">#icon-xiugai</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-lishihangcheng"></use>
                </svg>
                <div class="name">历史行程</div>
                <div class="code-name">#icon-lishihangcheng</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-wangfandijia"></use>
                </svg>
                <div class="name">往返低价</div>
                <div class="code-name">#icon-wangfandijia</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-hangbandongtai"></use>
                </svg>
                <div class="name">航班动态</div>
                <div class="code-name">#icon-hangbandongtai</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-qichebanci"></use>
                </svg>
                <div class="name">汽车班次</div>
                <div class="code-name">#icon-qichebanci</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-dangritui"></use>
                </svg>
                <div class="name">当日退</div>
                <div class="code-name">#icon-dangritui</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-xiugaidingdan"></use>
                </svg>
                <div class="name"> 修改订单</div>
                <div class="code-name">#icon-xiugaidingdan</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-mudedi"></use>
                </svg>
                <div class="name">目的地2</div>
                <div class="code-name">#icon-mudedi</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-feiji_qifei"></use>
                </svg>
                <div class="name">飞机_起飞</div>
                <div class="code-name">#icon-feiji_qifei</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-feiji_jiangla"></use>
                </svg>
                <div class="name">飞机_降落</div>
                <div class="code-name">#icon-feiji_jiangla</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-zuowei"></use>
                </svg>
                <div class="name">座位</div>
                <div class="code-name">#icon-zuowei</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-huochezhanxiao"></use>
                </svg>
                <div class="name">火车站2小</div>
                <div class="code-name">#icon-huochezhanxiao</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-jichangxiao"></use>
                </svg>
                <div class="name">机场小</div>
                <div class="code-name">#icon-jichangxiao</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-zhongguolianhang"></use>
                </svg>
                <div class="name">中国联航</div>
                <div class="code-name">#icon-zhongguolianhang</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-zhongguoyouzhenghangkong"></use>
                </svg>
                <div class="name">中国邮政航空</div>
                <div class="code-name">#icon-zhongguoyouzhenghangkong</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-aokaihangkong"></use>
                </svg>
                <div class="name">奥凯航空</div>
                <div class="code-name">#icon-aokaihangkong</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-yangzijianghangkong"></use>
                </svg>
                <div class="name">扬子江航空</div>
                <div class="code-name">#icon-yangzijianghangkong</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-zhongguoguojihangkong_CA"></use>
                </svg>
                <div class="name">中国国际航空_CA</div>
                <div class="code-name">#icon-zhongguoguojihangkong_CA</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-zhongguonanfanghangkong_CZ"></use>
                </svg>
                <div class="name">中国南方航空_CZ</div>
                <div class="code-name">#icon-zhongguonanfanghangkong_CZ</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-jixianghangkong_HO"></use>
                </svg>
                <div class="name">吉祥航空_HO</div>
                <div class="code-name">#icon-jixianghangkong_HO</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-xiangpenghangkong_L"></use>
                </svg>
                <div class="name">祥鹏航空_8L</div>
                <div class="code-name">#icon-xiangpenghangkong_L</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-tianjinhangkong_GX"></use>
                </svg>
                <div class="name">天津航空_GX</div>
                <div class="code-name">#icon-tianjinhangkong_GX</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-sichuanhangkong_U"></use>
                </svg>
                <div class="name">四川航空_3U</div>
                <div class="code-name">#icon-sichuanhangkong_U</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-huaxiahangkong_G"></use>
                </svg>
                <div class="name">华夏航空_G5</div>
                <div class="code-name">#icon-huaxiahangkong_G</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-hainanhangkong_HU"></use>
                </svg>
                <div class="name">海南航空_HU</div>
                <div class="code-name">#icon-hainanhangkong_HU</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-shamenhangkong_MF"></use>
                </svg>
                <div class="name">厦门航空_MF</div>
                <div class="code-name">#icon-shamenhangkong_MF</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-shanghaihangkong_FM"></use>
                </svg>
                <div class="name">上海航空_FM</div>
                <div class="code-name">#icon-shanghaihangkong_FM</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-shouduhangkong_JD"></use>
                </svg>
                <div class="name">首都航空_JD</div>
                <div class="code-name">#icon-shouduhangkong_JD</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-hebeihangkong_NS"></use>
                </svg>
                <div class="name">河北航空_NS</div>
                <div class="code-name">#icon-hebeihangkong_NS</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-kunminghangkong_KY"></use>
                </svg>
                <div class="name">昆明航空_KY</div>
                <div class="code-name">#icon-kunminghangkong_KY</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-xicanghangkong_TV"></use>
                </svg>
                <div class="name">西藏航空_TV</div>
                <div class="code-name">#icon-xicanghangkong_TV</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-zhongqinghangkong_OQ"></use>
                </svg>
                <div class="name">重庆航空_OQ</div>
                <div class="code-name">#icon-zhongqinghangkong_OQ</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-dongfanghangkong_MU"></use>
                </svg>
                <div class="name">东方航空_MU</div>
                <div class="code-name">#icon-dongfanghangkong_MU</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-shandonghangkong_SC"></use>
                </svg>
                <div class="name">山东航空_SC</div>
                <div class="code-name">#icon-shandonghangkong_SC</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-shenzhenhangkong_ZH"></use>
                </svg>
                <div class="name">深圳航空_ZH</div>
                <div class="code-name">#icon-shenzhenhangkong_ZH</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-xiangganghangkong_HX"></use>
                </svg>
                <div class="name">香港航空_HX</div>
                <div class="code-name">#icon-xiangganghangkong_HX</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-aomenhangkong_NX"></use>
                </svg>
                <div class="name">澳门航空_NX</div>
                <div class="code-name">#icon-aomenhangkong_NX</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-xibuhangkong_PN"></use>
                </svg>
                <div class="name">西部航空_PN</div>
                <div class="code-name">#icon-xibuhangkong_PN</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-chunqiuhangkong"></use>
                </svg>
                <div class="name">春秋航空</div>
                <div class="code-name">#icon-chunqiuhangkong</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-guotaihangkong"></use>
                </svg>
                <div class="name">国泰航空</div>
                <div class="code-name">#icon-guotaihangkong</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-kunpenghangkong"></use>
                </svg>
                <div class="name">鲲鹏航空</div>
                <div class="code-name">#icon-kunpenghangkong</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-chengduhangkong"></use>
                </svg>
                <div class="name">成都航空_EU</div>
                <div class="code-name">#icon-chengduhangkong</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-a-weiduankaiguan3x"></use>
                </svg>
                <div class="name">微断开关</div>
                <div class="code-name">#icon-a-weiduankaiguan3x</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-double_arrow"></use>
                </svg>
                <div class="name">double_arrow</div>
                <div class="code-name">#icon-double_arrow</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-double-down"></use>
                </svg>
                <div class="name">double-down</div>
                <div class="code-name">#icon-double-down</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-read"></use>
                </svg>
                <div class="name">read</div>
                <div class="code-name">#icon-read</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-user"></use>
                </svg>
                <div class="name">user</div>
                <div class="code-name">#icon-user</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-reward"></use>
                </svg>
                <div class="name">reward</div>
                <div class="code-name">#icon-reward</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-play"></use>
                </svg>
                <div class="name">play</div>
                <div class="code-name">#icon-play</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-moon"></use>
                </svg>
                <div class="name">moon</div>
                <div class="code-name">#icon-moon</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-sun"></use>
                </svg>
                <div class="name">sun</div>
                <div class="code-name">#icon-sun</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-icon-caret-up"></use>
                </svg>
                <div class="name">icon-caret-up</div>
                <div class="code-name">#icon-icon-caret-up</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-icon-close"></use>
                </svg>
                <div class="name">icon-close</div>
                <div class="code-name">#icon-icon-close</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-icon-caret-right"></use>
                </svg>
                <div class="name">icon-caret-right</div>
                <div class="code-name">#icon-icon-caret-right</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-icon-cleared"></use>
                </svg>
                <div class="name">icon-cleared</div>
                <div class="code-name">#icon-icon-cleared</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-icon-check"></use>
                </svg>
                <div class="name">icon-check</div>
                <div class="code-name">#icon-icon-check</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-icon-down"></use>
                </svg>
                <div class="name">icon-down</div>
                <div class="code-name">#icon-icon-down</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-icon-download"></use>
                </svg>
                <div class="name">icon-download</div>
                <div class="code-name">#icon-icon-download</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-icon-copy"></use>
                </svg>
                <div class="name">icon-copy</div>
                <div class="code-name">#icon-icon-copy</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-icon-cloud-upload"></use>
                </svg>
                <div class="name">icon-cloud-upload</div>
                <div class="code-name">#icon-icon-cloud-upload</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-icon-edit"></use>
                </svg>
                <div class="name">icon-edit</div>
                <div class="code-name">#icon-icon-edit</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-icon-release"></use>
                </svg>
                <div class="name">icon-release</div>
                <div class="code-name">#icon-icon-release</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-icon-delete"></use>
                </svg>
                <div class="name">icon-delete</div>
                <div class="code-name">#icon-icon-delete</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-icon-increase"></use>
                </svg>
                <div class="name">icon-increase</div>
                <div class="code-name">#icon-icon-increase</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-icon-right"></use>
                </svg>
                <div class="name">icon-right</div>
                <div class="code-name">#icon-icon-right</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-icon-list"></use>
                </svg>
                <div class="name">icon-list</div>
                <div class="code-name">#icon-icon-list</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-icon-more-vertical"></use>
                </svg>
                <div class="name">icon-more-vertical</div>
                <div class="code-name">#icon-icon-more-vertical</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-icon-search"></use>
                </svg>
                <div class="name">icon-search</div>
                <div class="code-name">#icon-icon-search</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-icon-up"></use>
                </svg>
                <div class="name">icon-up</div>
                <div class="code-name">#icon-icon-up</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-icon-given"></use>
                </svg>
                <div class="name">icon-given</div>
                <div class="code-name">#icon-icon-given</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-icon-left"></use>
                </svg>
                <div class="name">icon-left</div>
                <div class="code-name">#icon-icon-left</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-icon-plus"></use>
                </svg>
                <div class="name">icon-plus</div>
                <div class="code-name">#icon-icon-plus</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-icon-account"></use>
                </svg>
                <div class="name">icon-account</div>
                <div class="code-name">#icon-icon-account</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-icon-agreement"></use>
                </svg>
                <div class="name">icon-agreement</div>
                <div class="code-name">#icon-icon-agreement</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-icon-adapt-down"></use>
                </svg>
                <div class="name">icon-adapt-down</div>
                <div class="code-name">#icon-icon-adapt-down</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-icon-cancellation"></use>
                </svg>
                <div class="name">icon-cancellation</div>
                <div class="code-name">#icon-icon-cancellation</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-icon-closed"></use>
                </svg>
                <div class="name">icon-closed</div>
                <div class="code-name">#icon-icon-closed</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-icon-business"></use>
                </svg>
                <div class="name">icon-business</div>
                <div class="code-name">#icon-icon-business</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-icon-an-application"></use>
                </svg>
                <div class="name">icon-an-application</div>
                <div class="code-name">#icon-icon-an-application</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-icon-annex"></use>
                </svg>
                <div class="name">icon-annex</div>
                <div class="code-name">#icon-icon-annex</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-icon-binding"></use>
                </svg>
                <div class="name">icon-binding</div>
                <div class="code-name">#icon-icon-binding</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-icon-controls"></use>
                </svg>
                <div class="name">icon-controls</div>
                <div class="code-name">#icon-icon-controls</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-icon-drag"></use>
                </svg>
                <div class="name">icon-drag</div>
                <div class="code-name">#icon-icon-drag</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-icon-disable"></use>
                </svg>
                <div class="name">icon-disable</div>
                <div class="code-name">#icon-icon-disable</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-icon-exit"></use>
                </svg>
                <div class="name">icon-exit</div>
                <div class="code-name">#icon-icon-exit</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-icon-copy2"></use>
                </svg>
                <div class="name">icon-copy2</div>
                <div class="code-name">#icon-icon-copy2</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-icon-eye-close"></use>
                </svg>
                <div class="name">icon-eye-close</div>
                <div class="code-name">#icon-icon-eye-close</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-icon-eye-open"></use>
                </svg>
                <div class="name">icon-eye-open</div>
                <div class="code-name">#icon-icon-eye-open</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-icon-file-print"></use>
                </svg>
                <div class="name">icon-file-print</div>
                <div class="code-name">#icon-icon-file-print</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-icon-handle"></use>
                </svg>
                <div class="name">icon-handle</div>
                <div class="code-name">#icon-icon-handle</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-icon-file-store"></use>
                </svg>
                <div class="name">icon-file-store</div>
                <div class="code-name">#icon-icon-file-store</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-icon-initiate"></use>
                </svg>
                <div class="name">icon-initiate</div>
                <div class="code-name">#icon-icon-initiate</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-icon-gji"></use>
                </svg>
                <div class="name">icon-gji</div>
                <div class="code-name">#icon-icon-gji</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-icon-forward"></use>
                </svg>
                <div class="name">icon-forward</div>
                <div class="code-name">#icon-icon-forward</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-icon-mailbox"></use>
                </svg>
                <div class="name">icon-mailbox</div>
                <div class="code-name">#icon-icon-mailbox</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-icon-inspect"></use>
                </svg>
                <div class="name">icon-inspect</div>
                <div class="code-name">#icon-icon-inspect</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-icon-password"></use>
                </svg>
                <div class="name">icon-password</div>
                <div class="code-name">#icon-icon-password</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-icon-orders"></use>
                </svg>
                <div class="name">icon-orders</div>
                <div class="code-name">#icon-icon-orders</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-icon-more-circle"></use>
                </svg>
                <div class="name">icon-more-circle</div>
                <div class="code-name">#icon-icon-more-circle</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-icon-remove"></use>
                </svg>
                <div class="name">icon-remove</div>
                <div class="code-name">#icon-icon-remove</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-icon-phone"></use>
                </svg>
                <div class="name">icon-phone</div>
                <div class="code-name">#icon-icon-phone</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-icon-renew"></use>
                </svg>
                <div class="name">icon-renew</div>
                <div class="code-name">#icon-icon-renew</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-icon-refresh"></use>
                </svg>
                <div class="name">icon-refresh</div>
                <div class="code-name">#icon-icon-refresh</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-icon-right2"></use>
                </svg>
                <div class="name">icon-right2</div>
                <div class="code-name">#icon-icon-right2</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-icon-revoke"></use>
                </svg>
                <div class="name">icon-revoke</div>
                <div class="code-name">#icon-icon-revoke</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-icon-respon"></use>
                </svg>
                <div class="name">icon-respon</div>
                <div class="code-name">#icon-icon-respon</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-icon-scan-code"></use>
                </svg>
                <div class="name">icon-scan-code</div>
                <div class="code-name">#icon-icon-scan-code</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-icon-restore"></use>
                </svg>
                <div class="name">icon-restore</div>
                <div class="code-name">#icon-icon-restore</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-icon-shift"></use>
                </svg>
                <div class="name">icon-shift</div>
                <div class="code-name">#icon-icon-shift</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-icon-start"></use>
                </svg>
                <div class="name">icon-start</div>
                <div class="code-name">#icon-icon-start</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-icon-set-up"></use>
                </svg>
                <div class="name">icon-set-up</div>
                <div class="code-name">#icon-icon-set-up</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-icon-stop"></use>
                </svg>
                <div class="name">icon-stop</div>
                <div class="code-name">#icon-icon-stop</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-icon-suspend"></use>
                </svg>
                <div class="name">icon-suspend</div>
                <div class="code-name">#icon-icon-suspend</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-icon-sync"></use>
                </svg>
                <div class="name">icon-sync</div>
                <div class="code-name">#icon-icon-sync</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-icon-update-records"></use>
                </svg>
                <div class="name">icon-update-records</div>
                <div class="code-name">#icon-icon-update-records</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-icon-unlock"></use>
                </svg>
                <div class="name">icon-unlock</div>
                <div class="code-name">#icon-icon-unlock</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-icon-full-screen"></use>
                </svg>
                <div class="name">icon-full-screen</div>
                <div class="code-name">#icon-icon-full-screen</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-icon-home"></use>
                </svg>
                <div class="name">icon-home</div>
                <div class="code-name">#icon-icon-home</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-icon-file-information"></use>
                </svg>
                <div class="name">icon-file-information</div>
                <div class="code-name">#icon-icon-file-information</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-icon-data-model"></use>
                </svg>
                <div class="name">icon-data-model</div>
                <div class="code-name">#icon-icon-data-model</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-icon-message"></use>
                </svg>
                <div class="name">icon-message</div>
                <div class="code-name">#icon-icon-message</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-icon-menu-expand"></use>
                </svg>
                <div class="name">icon-menu-expand</div>
                <div class="code-name">#icon-icon-menu-expand</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-icon-surface-circle"></use>
                </svg>
                <div class="name">icon-surface-circle </div>
                <div class="code-name">#icon-icon-surface-circle</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-icon-eye-pull"></use>
                </svg>
                <div class="name">icon-eye-pull</div>
                <div class="code-name">#icon-icon-eye-pull</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-icon-hour"></use>
                </svg>
                <div class="name">icon-hour</div>
                <div class="code-name">#icon-icon-hour</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-icon-technologies"></use>
                </svg>
                <div class="name">icon-technologies</div>
                <div class="code-name">#icon-icon-technologies</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-icon-menu-fold"></use>
                </svg>
                <div class="name">icon-menu-fold</div>
                <div class="code-name">#icon-icon-menu-fold</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-icon-classified"></use>
                </svg>
                <div class="name">icon-classified</div>
                <div class="code-name">#icon-icon-classified</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-icon-translate"></use>
                </svg>
                <div class="name">icon-translate</div>
                <div class="code-name">#icon-icon-translate</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-icon-question-circle"></use>
                </svg>
                <div class="name">icon-question-circle</div>
                <div class="code-name">#icon-icon-question-circle</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-icon-exclamation"></use>
                </svg>
                <div class="name">icon-exclamation</div>
                <div class="code-name">#icon-icon-exclamation</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-icon-circle-fill"></use>
                </svg>
                <div class="name">icon-circle-fill</div>
                <div class="code-name">#icon-icon-circle-fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-icon-circle-answer"></use>
                </svg>
                <div class="name">icon-circle-answer</div>
                <div class="code-name">#icon-icon-circle-answer</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-icon-circle-exclamation"></use>
                </svg>
                <div class="name">icon-circle-exclamation</div>
                <div class="code-name">#icon-icon-circle-exclamation</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-icon-sifting"></use>
                </svg>
                <div class="name">icon-sifting</div>
                <div class="code-name">#icon-icon-sifting</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-icon-filter"></use>
                </svg>
                <div class="name">icon-filter</div>
                <div class="code-name">#icon-icon-filter</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-icon-caret-left"></use>
                </svg>
                <div class="name">icon-caret-left</div>
                <div class="code-name">#icon-icon-caret-left</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-icon-caret-vertical"></use>
                </svg>
                <div class="name">icon-caret-vertical</div>
                <div class="code-name">#icon-icon-caret-vertical</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-icon-caret-down"></use>
                </svg>
                <div class="name">icon-caret-down</div>
                <div class="code-name">#icon-icon-caret-down</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-gitee1"></use>
                </svg>
                <div class="name">gitee</div>
                <div class="code-name">#icon-gitee1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-gitee2"></use>
                </svg>
                <div class="name">gitee</div>
                <div class="code-name">#icon-gitee2</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-github-fill"></use>
                </svg>
                <div class="name">github-fill</div>
                <div class="code-name">#icon-github-fill</div>
            </li>
          
          </ul>
          <div class="article markdown">
          <h2 id="symbol-">Symbol 引用</h2>
          <hr>

          <p>这是一种全新的使用方式，应该说这才是未来的主流，也是平台目前推荐的用法。相关介绍可以参考这篇<a href="">文章</a>
            这种用法其实是做了一个 SVG 的集合，与另外两种相比具有如下特点：</p>
          <ul>
            <li>支持多色图标了，不再受单色限制。</li>
            <li>通过一些技巧，支持像字体那样，通过 <code>font-size</code>, <code>color</code> 来调整样式。</li>
            <li>兼容性较差，支持 IE9+，及现代浏览器。</li>
            <li>浏览器渲染 SVG 的性能一般，还不如 png。</li>
          </ul>
          <p>使用步骤如下：</p>
          <h3 id="-symbol-">第一步：引入项目下面生成的 symbol 代码：</h3>
<pre><code class="language-html">&lt;script src="./iconfont.js"&gt;&lt;/script&gt;
</code></pre>
          <h3 id="-css-">第二步：加入通用 CSS 代码（引入一次就行）：</h3>
<pre><code class="language-html">&lt;style&gt;
.icon {
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}
&lt;/style&gt;
</code></pre>
          <h3 id="-">第三步：挑选相应图标并获取类名，应用于页面：</h3>
<pre><code class="language-html">&lt;svg class="icon" aria-hidden="true"&gt;
  &lt;use xlink:href="#icon-xxx"&gt;&lt;/use&gt;
&lt;/svg&gt;
</code></pre>
          </div>
      </div>

    </div>
  </div>
  <script>
  $(document).ready(function () {
      $('.tab-container .content:first').show()

      $('#tabs li').click(function (e) {
        var tabContent = $('.tab-container .content')
        var index = $(this).index()

        if ($(this).hasClass('active')) {
          return
        } else {
          $('#tabs li').removeClass('active')
          $(this).addClass('active')

          tabContent.hide().eq(index).fadeIn()
        }
      })
    })
  </script>
</body>
</html>
